<template>
  <van-form @submit="onSubmit">
    <div class="My-login-top">
      <router-link to="/home/my">
        <img src="../components/img/fanhui.png"
      /></router-link>
      <router-link to="/home/mysignup">注册</router-link>
    </div>
    <div class="my-divlogin">
      <div class="my-login-title">
        <h1 class="my-login">登录</h1>
      </div>
    </div>

    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const username = ref("");
    const password = ref("");
    const onSubmit = (values) => {
      console.log("submit", values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
</script>
 
<style lang="scss" scoped>
.ddd {
  margin-top: 100px;
}
.login-title {
  text-align: center;
  margin-top: 50px;
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
::v-deep .van-nav-bar__content {
  position: relative;

  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 46px;
  border: 0px solid red;
}
::v-deep .van-cell-group--inset {
  margin-top: 80px;
}

.My-login-top {
  display: flex;
  justify-content: space-between;
  margin: 10px 10px;
}
.My-login-top img {
  width: 30px;
  height: 27px;
}
.My-login-top a {
  color: rgb(70, 68, 68);
  font-weight: 500;
  font-size: 20px;
}
.my-login-title {
  text-align: center;
}
.van-cell {
  position: relative;

  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  margin: 15px 0px;
}
</style>